<template>
	<view class="contact">
		<view class="top">
			<image src="https://img1.baidu.com/it/u=3442064463,2328421976&fm=26&fmt=auto&gp=0.jpg" mode="widthFix">
			</image>
			<view class="top_text">关于我们</view>
		</view>
		<view class="phone" @click="phone">
			联系电话：400-000-0000(点击拨打)
		</view>
		<view class="address">
			地址：xxx-xxxx-xxxx-x-xxxx
		</view>
		<map :latitude="latitude" :longitude="longitude" :markers="covers"></map>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 38.04039543362711,
				longitude: 114.52267159436033,
				covers: [{
					latitude: 38.04039543362711,
					longitude: 114.52267159436033,
					iconPath: '../../static/icon/marke.png',
					width: 40,
					height: 40
				}]
			}
		},
		methods: {
			phone() {
				uni.makePhoneCall({
					phoneNumber: "400-000-0000"
				})
			}
		}
	}
</script>

<style lang="scss">
	.contact {
		.top {
			width: 100%;
			position: relative;

			image {
				width: 100%;
			}

			.top_text {
				position: absolute;
				top: 40%;
				width: 100%;
				color: #fff;
				font-weight: bold;
				font-size: 60rpx;
				letter-spacing: 20rpx;
				text-align: center;
			}
		}

		.phone {
			padding: 10rpx 20rpx;
			font-size: 30rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid $shop-color-bg;
		}

		.address {
			font-size: 30rpx;
			padding: 10rpx 20rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid $shop-color-bg;
		}

		map {
			width: 100%;
			height: 500rpx;
		}
	}
</style>
